<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 使用bootcss镜像源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> -->
    <style>
        /* 设置页面高度和背景图片 */
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-image: url('{{ url_for("static", filename="image.jpg") }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 使用 Flexbox 居中内容 */
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 20px;
        }

        /* 白色卡片样式 */
        .login-card {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .login-card h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        /* 使用 Bootstrap 的网格系统 */
        .login-card .form-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .login-card .form-row label {
            margin-bottom: 0;
            margin-right: 10px;
            font-weight: bold;
            flex: 0 0 auto;
        }

        .login-card .form-row .form-control {
            flex: 1 1 auto;
        }

        /* 调整按钮样式 */
        .login-card .btn {
            width: 50%;
            padding: 8px;
            font-size: 16px;
            margin-top: 10px;
        }

        /* 使用 Flexbox 居中按钮 */
        .login-card form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 响应式调整 */
        @media (max-width: 576px) {
            .login-card .form-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .login-card .form-row label {
                margin-right: 0;
                margin-bottom: 5px;
            }

            .login-card .form-control, .login-card .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <h2>注册页面</h2>
            <form method="POST" action="{{ url_for('register') }}">
                <div class="form-row">
                    <label for="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                </div>
                <div class="form-row">
                    <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                </div>
                <div class="form-row">
                    <label for="confirm_password">确认密码</label>
                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请再次输入密码" required>
                </div>
                <button type="submit" name="submit" value="注册" class="btn btn-primary">注册</button>
            </form>
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="alert alert-{{ category }} mt-3" role="alert">
                    {{ message }}
                  </div>
                {% endfor %}
              {% endif %}
            {% endwith %}
        </div>
    </div>
</body>
</html>